<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>@介绍</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>

</head>

<body class="gray-bg">
<div class="form-group">

    <div class="col-sm-8">
        <select id="tid" class="form-control required">
            <option value="0">今日新进会员</option>
            <option value="1">本周新进会员</option>
            <option value="2">本月新进会员</option>
            <option value="3">今日总单量</option>
            <option value="4">本周总单量</option>
            <option value="5">本月总单量</option>
            <option value="6">今日已付(单)</option>
            <option value="7">本周已付(单)</option>
            <option value="8">本月已付(单)</option>
            <option value="9">今日下单总金额(元)</option>
            <option value="10">本周下单总金额(元)</option>
            <option value="11">本月下单总金额(元)</option>
            <option value="12">今日订单有效(元)</option>
            <option value="13">本周订单有效(元)</option>
            <option value="14">本月订单有效(元)</option>
            <option value="15">今日1级套餐已购买统计(元)</option>
            <option value="16">今日2级套餐已购买统计(元)</option>
            <option value="17">今日3级套餐已购买统计(元)</option>
            <option value="18">本周1级套餐已购买统计(元)</option>
            <option value="19">本周2级套餐已购买统计(元)</option>
            <option value="20">本周3级套餐已购买统计(元)</option>
            <option value="21">本月1级套餐已购买统计(元)</option>
            <option value="22">本月2级套餐已购买统计(元)</option>
            <option value="23">本月3级套餐已购买统计(元)</option>
            <option value="24">今日套餐总金额</option>
            <option value="25">本周套餐总金额</option>
            <option value="26">本月套餐总金额</option>
            <option value="27">今日返利</option>
            <option value="28">本周返利</option>
            <option value="29">本月返利</option>
        </select>
    </div>
    <a href="#" style="float:left" onclick="exportData();" class="btn btn-primary btn-sm"><span
            class="glyphicon glyphicon-plus" aria-hidden="true"></span>导出表单</a>
</div>
<div class="wrapper wrapper-content animated fadeInRight ibox-content">

    <div>
        <p>会员发展统计图</p>
        <div id="container" style="height: 300px">
        </div>
    </div>
    <div>
        <p>商城订单及金额统计</p>
        <div id="shop" style="height: 400px">

        </div>
    </div>

    <div>
        <p>套餐及返利</p>
        <div id="container3" style="height: 600px">
        </div>
    </div>
</div>
</div>
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript"
        src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<scripts>
    <script type="text/javascript">
        $(document).ready(function () {
            //会员
            $.ajax({
                type: "GET",
                url: " [[@{/manage/Auser/selectCountUser}]]",// 跳转到 action
                async: true,
                dataType: 'text',
                success: function (res) {
                    // console.log(res)
                    member(res);
                }
            });
            //商城
            $.ajax({
                type: "GET",
                url: " [[@{/manage/order/countMemory}]]",// 跳转到 action
                async: true,
                dataType: 'text',
                success: function (res) {
                    // console.log(res)

                    shop(res);
                }
            });
        });


        //会员
        function member(res) {
            var dataU = eval('(' + res + ')');
            var dom = document.getElementById("container");
            var myChart = echarts.init(dom);
            var app = {};
            option = null;
            app.title = '会员发展统计';
            option = {
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['今日新进会员(单位人)', '本周新进会员（单位人）', '本月新进会员（单位人）'],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '会员发展数',
                        type: 'bar',
                        barWidth: '60%',
                        data: [dataU.day, dataU.week, dataU.month]
                    }
                ]
            };
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
        }

        function shop(res) {
            console.log("上车给》》》》》》》》》》" + res);
            var dataU = eval('(' + res + ')');

            var dom = document.getElementById("shop");
            var myChart = echarts.init(dom);
            var app = {};
            option = null;
            var posList = [
                'left', 'right', 'top', 'bottom',
                'inside',
                'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
                'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
            ];
            app.configParameters = {
                rotate: {
                    min: -90,
                    max: 90
                },
                align: {
                    options: {
                        left: 'left',
                        center: 'center',
                        right: 'right'
                    }
                },
                verticalAlign: {
                    options: {
                        top: 'top',
                        middle: 'middle',
                        bottom: 'bottom'
                    }
                },
                position: {
                    options: echarts.util.reduce(posList, function (map, pos) {
                        map[pos] = pos;
                        return map;
                    }, {})
                },
                distance: {
                    min: 0,
                    max: 100
                }
            };

            app.config = {
                rotate: 90,
                align: 'left',
                verticalAlign: 'middle',
                position: 'insideBottom',
                distance: 15,
                onChange: function () {
                    var labelOption = {
                        normal: {
                            rotate: app.config.rotate,
                            align: app.config.align,
                            verticalAlign: app.config.verticalAlign,
                            position: app.config.position,
                            distance: app.config.distance
                        }
                    };
                    myChart.setOption({
                        series: [{
                            label: labelOption
                        }, {
                            label: labelOption
                        }, {
                            label: labelOption
                        }, {
                            label: labelOption
                        }]
                    });
                }
            };


            var labelOption = {
                normal: {
                    show: true,
                    position: app.config.position,
                    distance: app.config.distance,
                    align: app.config.align,
                    verticalAlign: app.config.verticalAlign,
                    rotate: app.config.rotate,
                    formatter: '{c}  {name|{a}}',
                    fontSize: 16,
                    rich: {
                        name: {
                            textBorderColor: '#fff'
                        }
                    }
                }
            };

            option = {
                color: ['#e5323e', '#006699', '#4cabce'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                // legend: {
                //     data: ['总单量', '已付订单', '订单总金额', '实付订单金额']
                // },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {show: false},
                        data: ['总单量（单）', '已付订单（单）', '下单总金额（元）', "实际有效支付金额（元）"]
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '今日',
                        type: 'bar',
                        barGap: 0,
                        label: labelOption,
                        data: [dataU.day, dataU.dayA, dataU.daySumA, dataU.daySum]
                    },
                    {
                        name: '本周',
                        type: 'bar',
                        label: labelOption,
                        data: [dataU.week, dataU.weekA, dataU.weekSumA, dataU.weekSum]
                    },
                    {
                        name: '本月',
                        type: 'bar',
                        label: labelOption,
                        data: [dataU.month, dataU.monthA, dataU.monthSumA, dataU.monthSum]
                    }
                ]
            };
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
        }
        $(document).ready(function () {
            //会员
            $.ajax({
                type: "GET",
                url: " [[@{/manage/Auser/tocanCount}]]",// 跳转到 action
                async: true,
                dataType: 'text',
                success: function (res) {
                    // console.log(res)
                    taocan(res);
                }
            });
        });

        //会员
        function taocan(res) {
            var dataU = eval('(' + res + ')');
            var dom = document.getElementById("container3");
            var myChart = echarts.init(dom);
            var app = {};
            option = null;
            app.title = '套餐统计';
            option = {
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['今日1级套餐购买(元)', '今日2级套餐购买(元)', '今日3级套餐购买(元)', '今日总套餐购买(元)', '本周1级套餐购买(元)', '本周2级套餐购买(元)', '本周3级套餐购买(元)', '本周总套餐购买(元)', '本月1级套餐购买(元)', '本月2级套餐购买(元)', '本月3级套餐购买(元)', '本月总套餐购买(元)', '今日返利', '本周返利', '本月返利'],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '套餐购买及返利',
                        type: 'bar',
                        barWidth: '60%',
                        data: [dataU.v1Today, dataU.v2Today, dataU.v3Today, dataU.todayTotal, dataU.v1week, dataU.v2week, dataU.v3week, dataU.weektotal, dataU.v1month, dataU.v2month, dataU.v3month, dataU.monthtotal, dataU.todayFanli, dataU.weekFanli, dataU.monthFanli]
                    }
                ]
            };
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
        }


    </script>

</scripts>
<script>
    function exportData() {

        window.location.href = "[[@{/manage/Auser/export}]]?tid=" + $("#tid").val();
    }
</script>
</body>
</html>
